---
title: "Object Fit"
description: "用于控制被替换元素的内容如何调整大小的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/objectFit'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Contain

<!-- Resize an element's content to stay contained within its container using `.object-contain`. -->
使用 `.object-contain` 调整元素内容的大小，使其保持在容器内。

```html rose
<template preview>
  <div class="bg-rose-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-contain" src="/img/placeholder-rose.svg" alt="">
  </div>
</template>

<div class="bg-rose-300 ...">
  <img class="**object-contain** h-48 w-full ...">
</div>
```

## Cover

<!-- Resize an element's content to cover its container using `.object-cover`. -->
使用 `.object-cover` 调整元素内容的大小以覆盖其容器。

```html indigo
<template preview>
  <div class="bg-indigo-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-cover" src="/img/placeholder-indigo.svg" alt="">
  </div>
</template>

<div class="bg-indigo-300 ...">
  <img class="**object-cover** h-48 w-full ...">
</div>
```

## Fill

<!-- Stretch an element's content to fit its container using `.object-fill`. -->
使用 `.object-fill` 拉伸元素的内容以适应其容器。

```html lightBlue
<template preview>
  <div class="bg-light-blue-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-fill" src="/img/placeholder-light-blue.svg" alt="">
  </div>
</template>

<div class="bg-light-blue-300 ...">
  <img class="**object-fill** h-48 w-full ...">
</div>
```

## None

<!-- Display an element's content at its original size ignoring the container size using `.object-none`. -->
使用 `.object-none` 以原始大小显示元素的内容，忽略容器大小。

```html amber
<template preview>
  <div class="bg-amber-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-none" src="/img/placeholder-amber.svg" alt="">
  </div>
</template>

<div class="bg-yellow-300">
  <img class="**object-none** h-48 w-full ...">
</div>
```

## Scale Down

<!-- Display an element's content at its original size but scale it down to fit its container if necessary using `.object-scale-down`. -->
以原始大小显示元素的内容，但必要时使用 `.object-scale-down` 将其缩小以适应其容器。

```html emerald
<template preview>
  <div class="bg-emerald-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-scale-down" src="/img/placeholder-emerald.svg" alt="">
  </div>
</template>

<div class="bg-green-300">
  <img class="**object-scale-down** h-48 w-full ...">
</div>
```

## 响应式

<!-- To control how a replaced element's content should be resized only at a specific breakpoint, add a `{screen}:` prefix to any existing object fit utility. For example, adding the class `md:object-scale-down` to an element would apply the `object-scale-down` utility at medium screen sizes and above. -->
要控制被替换的元素的内容如何只在特定的断点处调整大小，可以在任何现有的 object fit 功能类前添加 `{screen}:` 前缀。例如，将类 `md:object-scale-down` 添加到元素中，将在中等尺寸及以上屏幕上应用 `object-scale-down` 功能。

```html
<div>
  <img class="object-contain **md:object-scale-down** ..." src="...">
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="objectFit" name="object-fit" />

### 禁用

<Disabling plugin="objectFit" name="object-fit" />
